import { FC, memo } from "react";
import { ColorPicker } from "antd";
import classNames from "classnames";

import { IBaseComponentProps } from "@/types/component";

export interface IThemeColorPickerProps extends IBaseComponentProps {
  theme: string;
  changeTheme: (color: string) => void;
}

const prefixcls = "theme-color-picker";

export const ThemeColorPicker: FC<IThemeColorPickerProps> = memo((props) => {
  const { theme, changeTheme, className } = props;
  // 定义颜色预设
  const colorPresets = [
    "#4080FF",
    "#ff4500",
    "#ff8c00",
    "#90ee90",
    "#00ced1",
    "#1e90ff",
    "#c71585",
    "rgba(255, 69, 0, 0.68)",
    "rgb(255, 120, 0)",
    "hsva(120, 40, 94)",
    "#E60000",
    "#002FA7",
    "#800020",
    "#F7E14D",
    "#5E0004",
    "#B05923",
    "#008C8C",
    "#81D8D0",
    "#003153",
    "#B0A4E3",
  ];
  return (
    <div className={classNames(prefixcls, className)}>
      <ColorPicker
        value={theme}
        onChange={(color) => {
          changeTheme(color.toHexString());
        }}
        presets={[{ colors: colorPresets, label: "" }]}
      />
    </div>
  );
});
